<form class="layui-form layui-box" style='padding:25px 30px 20px 0' action="{:url()}" data-auto="true" method="post">

    <div class="layui-form-item">
        <label class="layui-form-label">广告位</label>
        <div class="layui-input-block">
            <input type="text" name="name" value='{$spot.name}' disabled class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">广告名称</label>
        <div class="layui-input-block">
            <input type="text" name="name" value='{$vo.name|default=""}' required="required" title="请输入广告位名称" placeholder="请输入广告位名称" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">广告图片</label>
        <div class="layui-input-block">
            <div class="row nowrap">
                <div class="col-xs-3">
                    <div class="upload-image-box">
                        <section class="image-center" style="background-image:url('{$vo.image|default=$image}')"></section>
                        <input value="{$vo.image|default=$image}" type="hidden" name="image">
                    </div>
                </div>
                <div class="col-xs-6">
                    <a data-file="one" data-type="jpg,png,jpeg" data-field="image" class="btn btn-sm">上传图片</a>
                </div>
            </div>

            <p class="help-block" style="margin-top:10px;color:#ccc;font-size: 12px;">图片建议尺寸：640像素 * 360像素</p>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">排序</label>
        <div class="layui-input-block">
            <input type="text" name="sort" value='{$vo.sort|default=""}' required="required" title="请输入广告位名称,排序小的在前面" placeholder="请输入广告位名称" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">底部导航栏</label>
        <div class="layui-input-block" style="height:auto">
            <label class="think-checkbox" >
                <input  type="radio"  name="type" value="1" {if isset($vo.type)}{if condition=" $vo['type']==1"}checked{/if}{/if} style="margin-left: 0.6rem;"/>&nbsp;是
            </label>
            <label class="think-checkbox" >
                <input type="radio" name="type" value="2" {if isset($vo.type)}{if condition=" $vo['type']==2"}checked{/if}{/if} style="margin-left: 0.6rem;"/>&nbsp;否
            </label>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">广告链接</label>
        <div class="layui-input-block">
            <input type="text" name="link" value='{$vo.link|default=""}'  title="请输入广告链接" placeholder="请输入广告链接" class="layui-input">
        </div>
    </div>

    <div class="hr-line-dashed"></div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <p> 咨询师列表 ：/pages/consultant/consultant</p>
            <p> 我的预约 ：/pages/myreservation/myreservation</p>
            <p> 咨询师详情 ：/pages/development/development?id=咨询师id</p>
            <p> 咨询机构 ：/pages/institutions/institutions</p>
            <p> 咨询机构详情 ：/pages/instdetails/instdetails?id=咨询机构id</p>
            <p> 文章详情 ：/pages/thetext/thetext?id=文章id</p>
            <p> 课程详情 ：/pages/wptext/wptext?id=课程id&type=2</p>
            <p> 心理测试 ：/pages/wptext/wptext?id=心理测试id&type=1</p>
        </div>
    </div>
    <div class="layui-form-item text-center">
        <input type="hidden" name="spot_id" value="{$spot.id}"/>
        {if isset($vo['id'])}<input type='hidden' value='{$vo.id}' name='id'/>{/if}
        <button class="layui-btn" type='submit'>保存数据</button>
        <button class="layui-btn layui-btn-danger" type='button' data-confirm="确定要取消编辑吗？" data-close>取消编辑</button>
    </div>

</form>

<script>
    (function () {
        window.form.render();
    })();
    $(document).ready(function() {
        $('body').on('change', '.upload-image-box input', function () {
            $('.news-item.active').css('background-image', 'url(' + this.value + ')');
            $(this).parent().children('.image-center').css('background-image', 'url(' + this.value + ')');
        });

    })
</script>
